<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div class="page-header">
        <el-page-header @back="goBack" :content="paperTitle + ' - 试卷分析'" />
      </div>

      <!-- 基础统计信息 -->
      <div class="statistics-section">
        <h3 class="section-title">基础统计</h3>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="stat-card">
              <div class="stat-title">最高分</div>
              <div class="stat-value highlight">{{ paperAnalysis.highestScore || 0 }}</div>
              <div class="stat-extra">{{ paperAnalysis.highestScoreStudentName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="stat-title">最低分</div>
              <div class="stat-value lowlight">{{ paperAnalysis.lowestScore || 0 }}</div>
              <div class="stat-extra">{{ paperAnalysis.lowestScoreStudentName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="stat-title">平均分</div>
              <div class="stat-value">{{ parseFloat(paperAnalysis.averageScore || 0).toFixed(1) }}</div>
              <div class="stat-extra">总分：{{ paperAnalysis.totalScore || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="stat-title">参与人数</div>
              <div class="stat-value">{{ paperAnalysis.participantCount || 0 }}</div>
              <div class="stat-extra">提交数：{{ paperAnalysis.submissionCount || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stat-card score-rates">
              <div class="rate-item">
                <span class="rate-label">优秀率:</span>
                <span class="rate-value excellent">{{ paperAnalysis.excellentRate || '0%' }}</span>
              </div>
              <div class="rate-item">
                <span class="rate-label">良好率:</span>
                <span class="rate-value good">{{ paperAnalysis.goodRate || '0%' }}</span>
              </div>
              <div class="rate-item">
                <span class="rate-label">及格率:</span>
                <span class="rate-value pass">{{ paperAnalysis.passRate || '0%' }}</span>
              </div>
              <div class="rate-item">
                <span class="rate-label">不及格率:</span>
                <span class="rate-value fail">{{ paperAnalysis.failRate || '0%' }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分数分布图 -->
      <div class="chart-section">
        <h3 class="section-title">分数分布</h3>
        <div class="chart-container" id="scoreDistributionChart"></div>
      </div>

      <!-- 题型分析 -->
      <div class="analysis-section">
        <h3 class="section-title">题型分析</h3>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-table :data="questionTypeAnalysis" stripe>
              <el-table-column label="题型" prop="typeName" align="center" />
              <el-table-column label="题目数" prop="questionCount" align="center" />
              <el-table-column label="平均得分" align="center">
                <template #default="scope">
                  {{ parseFloat(scope.row.averageScore).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column label="题型总分值" prop="totalScore" align="center" />
              <el-table-column label="得分率" align="center" width="200">
                <template #default="scope">
                  <div class="rate-display">
                    <el-progress 
                      :percentage="parseFloat(scope.row.scoreRate)" 
                      :color="getScoreRateColor(scope.row.scoreRate)" 
                      :stroke-width="18" 
                      :show-text="false"
                    />
                    <span :class="getScoreRateClass(scope.row.scoreRate)">{{ parseFloat(scope.row.scoreRate).toFixed(2) }}%</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="8">
            <div class="chart-container" id="typeRadarChart"></div>
          </el-col>
        </el-row>
      </div>

      <!-- 难度分析 -->
      <div class="analysis-section">
        <h3 class="section-title">难度分析</h3>
        <div class="chart-container" id="difficultyLineChart"></div>
      </div>

      <!-- 题目详细分析 -->
      <div class="questions-section">
        <h3 class="section-title">题目详细分析</h3>
        <el-table :data="questionAnalysis" stripe>
          <el-table-column label="题号" prop="questionNumber" align="center" width="70" />
          <el-table-column label="题目内容" align="left" min-width="300">
            <template #default="scope">
              <div v-html="scope.row.questionContent" class="math-content"></div>
            </template>
          </el-table-column>
          <el-table-column label="题型" align="center" width="80">
            <template #default="scope">
              <el-tag :type="getQuestionTypeTag(scope.row.questionType === '单选题' ? 0 : 
                                               scope.row.questionType === '多选题' ? 1 : 
                                               scope.row.questionType === '判断题' ? 2 : 
                                               scope.row.questionType === '填空题' ? 3 : 4)">
                {{ scope.row.questionType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="章节" prop="chapterName" align="center" width="150" />
          <el-table-column label="难度" align="center" width="120">
            <template #default="scope">
              <span class="difficulty-stars" :style="{color: getDifficultyColor(scope.row.difficulty)}">
                {{ getDifficultyText(scope.row.difficulty) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="平均得分" align="center" width="120">
            <template #default="scope">
              <span :class="getScoreRateClass(parseFloat(scope.row.averageScore) / parseFloat(scope.row.score) * 100)">
                {{ parseFloat(scope.row.averageScore).toFixed(1) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="题目分值" align="center" width="100">
            <template #default="scope">
              <span class="score-tag">{{ parseFloat(scope.row.score).toFixed(1) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="得分率" align="center" width="200">
            <template #default="scope">
              <div class="rate-display">
                <el-progress 
                  :percentage="parseFloat(scope.row.scoreRate)" 
                  :color="getScoreRateColor(scope.row.scoreRate)" 
                  :stroke-width="18" 
                  :show-text="false"
                />
                <span :class="getScoreRateClass(scope.row.scoreRate)">{{ parseFloat(scope.row.scoreRate).toFixed(2) }}%</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- AI辅助试卷分析 -->
      <div class="ai-analysis-section">
        <h3 class="section-title">
          AI辅助试卷分析
        </h3>
        <div class="ai-description">
          <el-alert
            title="提示：AI分析可以对试卷整体情况提供深度洞察和教学改进建议"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
          <div class="ai-button-container">
            <el-button type="primary" size="default" @click="showAIAnalysis">
              AI分析
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- AI分析结果弹窗 -->
    <el-dialog 
      title="AI辅助试卷分析结果" 
      v-model="aiDialogVisible" 
      width="70%" 
      :before-close="handleDialogClose"
      class="ai-analysis-dialog"
      destroy-on-close
      :close-on-click-modal="false">
      <div v-loading="aiAnalysisLoading" class="ai-analysis-content">
        <div v-if="aiAnalysisResult && !aiAnalysisLoading" v-html="formatAIAnalysisResult" class="ai-result"></div>
        <div v-else-if="!aiAnalysisLoading && aiAnalysisError" class="ai-error">
          <el-alert
            title="获取AI分析结果失败"
            type="error"
            :closable="false"
            show-icon>
            <template #description>
              <p>{{ aiAnalysisError }}</p>
              <p>分析过程可能需要较长时间，请耐心等待或稍后再试。</p>
            </template>
          </el-alert>
        </div>
        <div v-else-if="!aiAnalysisLoading && !aiAnalysisResult" class="ai-empty">
          暂无分析结果
        </div>
        <div v-else-if="aiAnalysisLoading" class="ai-loading-tip">
          <p>正在生成分析结果，这可能需要1-2分钟，请耐心等待...</p>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getPaperAnalysis, getQuestionTypeAnalysis, getQuestionAnalysis, getAIPaperAnalysis } from '@/api/manage/analysis'
import { loadMathJax, safeRenderMathJax } from '@/utils/mathJax'

export default {
  name: 'PaperAnalysis',
  data() {
    return {
      loading: false,
      paperId: '',
      paperTitle: '试卷分析',
      charts: {},
      paperAnalysis: {
        highestScore: 0,
        highestScoreStudentName: '',
        lowestScore: 0,
        lowestScoreStudentName: '',
        averageScore: 0,
        totalScore: 0,
        participantCount: 0,
        submissionCount: 0,
        excellentRate: '0%',
        goodRate: '0%',
        passRate: '0%',
        failRate: '0%',
        scoreDistribution: []
      },
      questionTypeAnalysis: [],
      questionAnalysis: [],
      // AI分析相关数据
      aiDialogVisible: false,
      aiAnalysisLoading: false,
      aiAnalysisResult: '',
      aiAnalysisError: '',
      aiAnalysisCache: {} // 缓存AI分析结果，避免重复请求
    }
  },
  created() {
    this.paperId = this.$route.params.paperId
    this.getPaperAnalysis()
  },
  mounted() {
    window.addEventListener('resize', this.resizeCharts)
    // 使用工具函数加载MathJax库
    safeRenderMathJax()
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.resizeCharts)
    this.disposeCharts()
  },
  computed: {
    // 格式化AI分析结果，处理换行和标题
    formatAIAnalysisResult() {
      if (!this.aiAnalysisResult) return '';
      
      // 处理标题格式和模块化内容
      let formatted = this.aiAnalysisResult;
      
      // 定义关键分析模块标题
      const keyModules = [
        '试卷总体分析',
        '得分点分析',
        '题型分析',
        '问题定位',
        '改进建议'
      ];
      
      // 替换标题格式，将大标题和关键模块标题处理为更显眼的样式
      formatted = formatted.replace(/(?:^|\n)(#+)\s+(.*?)(?:\n|$)/g, (match, hashes, title) => {
        const level = hashes.length;
        
        // 检查是否为关键分析模块标题
        const isKeyModule = keyModules.some(module => title.includes(module));
        
        if (level === 1) {
          // 主标题
          return `<div class="ai-title-module"><h${level + 1} class="ai-title ai-title-${level}">${title}</h${level + 1}>`;
        } else if (level === 2) {
          // 次级标题，开始一个新模块
          if (isKeyModule) {
            // 关键分析模块使用特殊样式
            return `</div><div class="ai-title-module"><h${level + 1} class="ai-title ai-title-${level} ai-title-key-module">${title}</h${level + 1}>`;
          } else {
            return `</div><div class="ai-title-module"><h${level + 1} class="ai-title ai-title-${level}">${title}</h${level + 1}>`;
          }
        } else {
          // 普通标题
          return `<h${level + 1} class="ai-title ai-title-${level}">${title}</h${level + 1}>`;
        }
      });
      
      // 处理数字列表，增强分析要点的显示
      formatted = formatted.replace(/(\n|^)(\d+)\.\s+(.*?)(?=\n|$)/g, (match, start, number, content) => {
        return `${start}<div class="ai-list-item"><span class="ai-list-number">${number}.</span><span class="ai-list-content">${content}</span></div>`;
      });
      
      // 处理换行
      formatted = formatted.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>');
      
      // 处理加粗文本，为加粗文本添加特殊样式
      formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong class="ai-bold-text">$1</strong>');
      
      // 处理斜体文本
      formatted = formatted.replace(/\*(.*?)\*/g, '<em>$1</em>');
      
      // 确保模块闭合
      if (!formatted.endsWith('</div>')) {
        formatted += '</div>';
      }
      
      return `<div class="ai-content-modules"><div class="ai-title-module"><p>${formatted}</p>`;
    }
  },
  methods: {
    // 获取试卷分析数据
    getPaperAnalysis() {
      this.loading = true
      
      // 获取基础分析数据
      getPaperAnalysis(this.paperId).then(response => {
        this.paperAnalysis = response.data || this.paperAnalysis
        
        // 如果有数据，获取试卷名称
        if (this.paperAnalysis.paperName) {
          this.paperTitle = this.paperAnalysis.paperName
        }
        
        // 获取题型分析数据
        return getQuestionTypeAnalysis(this.paperId)
      }).then(response => {
        this.questionTypeAnalysis = response.data || []
        
        // 获取题目详细分析数据
        return getQuestionAnalysis(this.paperId)
      }).then(response => {
        this.questionAnalysis = response.data || []
        
        this.loading = false
        
        // 初始化图表
        this.$nextTick(() => {
          this.initScoreDistributionChart()
          this.initTypeRadarChart()
          this.initDifficultyLineChart()
          // 渲染数学公式
          safeRenderMathJax()
        })
      }).catch(error => {
        console.error('获取试卷分析数据失败:', error)
        this.$modal.msgError('获取试卷分析数据失败')
        this.loading = false
        
        // 使用模拟数据作为备用
        this.paperAnalysis = this.getMockPaperAnalysis()
        this.questionTypeAnalysis = this.getMockQuestionTypeAnalysis()
        this.questionAnalysis = this.getMockQuestionAnalysis()
        
        // 初始化图表
        this.$nextTick(() => {
          this.initScoreDistributionChart()
          this.initTypeRadarChart()
          this.initDifficultyLineChart()
          // 渲染数学公式
          safeRenderMathJax()
        })
      })
    },
    
    // 显示AI分析对话框
    showAIAnalysis() {
      // 确保对话框始终显示
      this.aiDialogVisible = true;
      
      // 检查是否正在请求中，避免重复请求
      if (this.aiAnalysisLoading) {
        console.log('AI分析请求已在进行中，请等待...');
        return;
      }
      
      // 检查缓存，如果有则直接使用
      if (this.aiAnalysisCache[this.paperId]) {
        this.aiAnalysisResult = this.aiAnalysisCache[this.paperId];
        this.aiAnalysisError = '';
        // 渲染数学公式
        this.$nextTick(() => {
          safeRenderMathJax(document.querySelector('.ai-result'));
        });
        return;
      }
      
      // 没有缓存，需要请求
      this.aiAnalysisLoading = true;
      this.aiAnalysisResult = '';
      this.aiAnalysisError = '';
      
      // 使用请求锁变量，防止同一个试卷重复请求
      const requestLock = `ai_analysis_${this.paperId}`;
      if (window[requestLock]) {
        console.log('请求已锁定，避免重复请求');
        return;
      }
      
      // 设置锁，5分钟后自动释放
      window[requestLock] = true;
      setTimeout(() => {
        window[requestLock] = false;
      }, 300000); // 5分钟锁定时间
      
      // 记录请求开始时间，用于提示用户等待
      const startTime = Date.now();
      
      getAIPaperAnalysis(this.paperId)
        .then(response => {
          if (response.code === 200 && response.data) {
            // 获取返回的content
            this.aiAnalysisResult = response.data.content || '分析结果为空';
            // 缓存结果
            this.aiAnalysisCache[this.paperId] = this.aiAnalysisResult;
            // 渲染数学公式
            this.$nextTick(() => {
              safeRenderMathJax(document.querySelector('.ai-result'));
            });
          } else {
            this.aiAnalysisError = response.msg || '获取分析结果失败';
          }
        })
        .catch(error => {
          console.error('AI辅助分析请求失败:', error);
          // 提供更详细的错误信息
          if (error.message && error.message.includes('timeout')) {
            this.aiAnalysisError = '请求超时，AI分析需要较长时间，请稍后再试';
          } else {
            this.aiAnalysisError = '网络错误，请稍后再试: ' + (error.message || '未知错误');
          }
        })
        .finally(() => {
          this.aiAnalysisLoading = false;
          // 释放请求锁
          window[requestLock] = false;
          
          // 确保对话框仍然显示
          this.$nextTick(() => {
            if (!this.aiDialogVisible) {
              this.aiDialogVisible = true;
          }
          });
        });
    },
    
    // 处理对话框关闭
    handleDialogClose() {
      this.aiDialogVisible = false;
    },
    
    // 返回按钮操作
    goBack() {
      this.$router.push({ path: `/paper/mark` })
    },
    
    // 初始化分数分布图表
    initScoreDistributionChart() {
      const chartDom = document.getElementById('scoreDistributionChart')
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      this.charts.scoreDistribution = chart
      
      // 修改为相对百分比
      const totalScore = parseFloat(this.paperAnalysis.totalScore) || 100
      
      // 计算百分比分数段，考虑小数点精度问题，边界减0.1
      const scoreRangeLabels = [
        `0-${(totalScore * 0.6 - 0.1).toFixed(1)}分 (0-60%)`, 
        `${(totalScore * 0.6).toFixed(1)}-${(totalScore * 0.8 - 0.1).toFixed(1)}分 (60-80%)`, 
        `${(totalScore * 0.8).toFixed(1)}-${(totalScore * 0.9 - 0.1).toFixed(1)}分 (80-90%)`, 
        `${(totalScore * 0.9).toFixed(1)}-${totalScore}分 (90-100%)`
      ]
      
      const scoreData = this.paperAnalysis.scoreDistribution || [0, 0, 0, 0]
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: scoreRangeLabels,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          minInterval: 1
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data: scoreData.map((count, index) => {
              return {
                value: count,
                itemStyle: {
                  color: this.getScoreRangeColor(index)
                }
              }
            })
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    // 初始化题型雷达图
    initTypeRadarChart() {
      const chartDom = document.getElementById('typeRadarChart')
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      this.charts.typeRadar = chart
      
      const typeNames = this.questionTypeAnalysis.map(type => type.typeName)
      const scoreRates = this.questionTypeAnalysis.map(type => parseFloat(type.scoreRate))
      
      const option = {
        title: {
          text: '题型得分率',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          indicator: typeNames.map(name => {
            return { name: name, max: 100 }
          }),
          center: ['50%', '55%'],
          radius: '65%'
        },
        series: [
          {
            name: '题型得分率',
            type: 'radar',
            data: [
              {
                value: scoreRates,
                name: '得分率(%)',
                areaStyle: {
                  color: 'rgba(64, 158, 255, 0.3)'
                },
                lineStyle: {
                  color: '#409EFF',
                  width: 2
                },
                itemStyle: {
                  color: '#409EFF'
                }
              }
            ]
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    // 初始化难度折线图
    initDifficultyLineChart() {
      const chartDom = document.getElementById('difficultyLineChart')
      if (!chartDom) return
      
      const chart = echarts.init(chartDom)
      this.charts.difficultyLine = chart
      
      // 按难度分组题目
      const difficultyGroups = [[], [], [], [], []]
      this.questionAnalysis.forEach(q => {
        if (q.difficulty >= 1 && q.difficulty <= 5) {
          difficultyGroups[q.difficulty - 1].push(q)
        }
      })
      
      // 计算每个难度的平均得分率
      const difficultyLabels = ['简单', '较简单', '中等', '较难', '困难']
      const scoreRates = difficultyGroups.map(group => {
        if (group.length === 0) return 0
        const total = group.reduce((sum, q) => sum + parseFloat(q.scoreRate || 0), 0)
        return parseFloat((total / group.length).toFixed(1))
      })
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: difficultyLabels
        },
        yAxis: {
          type: 'value',
          name: '平均得分率(%)',
          min: 0,
          max: 100
        },
        series: [
          {
            name: '得分率',
            type: 'line',
            data: scoreRates,
            smooth: true,
            label: {
              show: true,
              position: 'down',
              formatter: '{c}%'
            },
            markPoint: {
              data: [
                { type: 'max', name: '最高' },
                { type: 'min', name: '最低' }
              ]
            },
            lineStyle: {
              width: 3,
              color: '#67c23a'
            },
            itemStyle: {
              color: '#67c23a'
            }
          }
        ]
      }
      
      chart.setOption(option)
    },
    
    // 调整图表大小
    resizeCharts() {
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].resize()
        }
      })
    },
    
    // 销毁图表
    disposeCharts() {
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].dispose()
        }
      })
      this.charts = {}
    },
    
    // 根据得分率获取颜色
    getScoreRateColor(rate) {
      rate = parseFloat(rate)
      if (rate >= 90) {
        return '#67c23a' // 绿色 - 优秀
      } else if (rate >= 80) {
        return '#409eff' // 蓝色 - 良好
      } else if (rate >= 60) {
        return '#e6a23c' // 橙色 - 及格
      } else {
        return '#f56c6c' // 红色 - 不及格
      }
    },
    
    // 根据得分率获取样式类名
    getScoreRateClass(rate) {
      rate = parseFloat(rate)
      if (rate >= 90) {
        return 'score-excellent'
      } else if (rate >= 80) {
        return 'score-good'
      } else if (rate >= 60) {
        return 'score-pass'
      } else {
        return 'score-fail'
      }
    },
    
    // 根据分数段获取颜色
    getScoreRangeColor(index) {
      const colors = ['#f56c6c', '#e6a23c', '#409eff', '#67c23a']
      return colors[index] || '#909399'
    },
    
    // 根据难度获取标签类型
    getDifficultyTagType(difficulty) {
      const types = ['success', 'warning', 'info', 'danger', 'primary']
      return types[difficulty - 1] || 'info'
    },
    
    // 根据难度获取文本
    getDifficultyText(difficulty) {
      // 使用星星表示难度
      let stars = '';
      for (let i = 0; i < difficulty; i++) {
        stars += '★';
      }
      return stars || '未知';
    },
    
    // 获取题目类型标签样式
    getQuestionTypeTag(type) {
      const types = ['success', 'warning', 'info', 'danger', 'primary'];
      return types[type] || 'default';
    },
    
    // 获取难度颜色
    getDifficultyColor(difficulty) {
      const colors = ['#67c23a', '#409eff', '#e6a23c', '#f56c6c', '#909399'];
      return colors[difficulty - 1] || '#909399';
    },
    
    // 模拟数据 - 仅用于展示
    getMockPaperAnalysis() {
      return {
        paperName: '高等数学 - 期末测试',
        highestScore: 98.5,
        highestScoreStudentName: '张三',
        lowestScore: 42.0,
        lowestScoreStudentName: '李四',
        averageScore: 76.8,
        totalScore: 100,
        participantCount: 36,
        submissionCount: 35,
        excellentRate: '28.6%',
        goodRate: '31.4%',
        passRate: '77.1%',
        failRate: '22.9%',
        scoreDistribution: [8, 17, 11, 10] // [0-59, 60-79, 80-89, 90-100]
      }
    },
    
    getMockQuestionTypeAnalysis() {
      return [
        { typeName: '单选题', questionCount: 15, totalScore: 30, averageScore: 25.6, scoreRate: '85.3' },
        { typeName: '多选题', questionCount: 10, totalScore: 20, averageScore: 16.2, scoreRate: '81.0' },
        { typeName: '判断题', questionCount: 10, totalScore: 10, averageScore: 8.7, scoreRate: '87.0' },
        { typeName: '填空题', questionCount: 8, totalScore: 16, averageScore: 11.3, scoreRate: '70.6' },
        { typeName: '简答题', questionCount: 3, totalScore: 24, averageScore: 15.0, scoreRate: '62.5' }
      ]
    },
    
    getMockQuestionAnalysis() {
      return [
        { questionNumber: 1, questionType: '单选题', chapterName: '第一章 函数与极限', difficulty: 1, score: 2, averageScore: 1.9, scoreRate: '95.0', correctRate: '95%', questionContent: '设函数f(x)=x^2，则f(1)=？' },
        { questionNumber: 2, questionType: '单选题', chapterName: '第一章 函数与极限', difficulty: 2, score: 2, averageScore: 1.8, scoreRate: '90.0', correctRate: '90%', questionContent: '函数f(x)=ln(x+1)的定义域是？' },
        { questionNumber: 3, questionType: '多选题', chapterName: '第二章 导数与微分', difficulty: 3, score: 2, averageScore: 1.6, scoreRate: '80.0', correctRate: '82%', questionContent: '以下哪些函数是可导的？' },
        { questionNumber: 4, questionType: '判断题', chapterName: '第二章 导数与微分', difficulty: 2, score: 1, averageScore: 0.9, scoreRate: '90.0', correctRate: '90%', questionContent: '函数f(x)=|x|在x=0处可导。' },
        { questionNumber: 5, questionType: '填空题', chapterName: '第三章 微分中值定理与导数应用', difficulty: 4, score: 2, averageScore: 1.2, scoreRate: '60.0', correctRate: '60%', questionContent: '函数f(x)=x^3-3x+1在区间[0,2]上的最大值是_______。' },
        { questionNumber: 6, questionType: '简答题', chapterName: '第四章 不定积分', difficulty: 5, score: 8, averageScore: 4.8, scoreRate: '60.0', correctRate: '60%', questionContent: '求函数f(x)=x^2sin(x)的不定积分。' }
      ]
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.section-title {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0 15px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.statistics-section, .chart-section, .analysis-section, .questions-section {
  margin-bottom: 30px;
}

.stat-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 22px;
  font-weight: bold;
  margin: 8px 0;
  color: #303133;
}

.highlight {
  color: #67c23a;
}

.lowlight {
  color: #f56c6c;
}

.stat-extra {
  font-size: 12px;
  color: #909399;
}

.score-rates {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  padding: 20px;
}

.rate-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
}

.rate-label {
  color: #606266;
}

.rate-value {
  font-weight: bold;
}

.rate-value.excellent {
  color: #67c23a;
}

.rate-value.good {
  color: #409eff;
}

.rate-value.pass {
  color: #e6a23c;
}

.rate-value.fail {
  color: #f56c6c;
}

.score-excellent {
  color: #67c23a;
  font-weight: bold;
}

.score-good {
  color: #409eff;
  font-weight: bold;
}

.score-pass {
  color: #303133;
  font-weight: bold;
}

.score-fail {
  color: #f56c6c;
  font-weight: bold;
}

.score-tag {
  display: inline-block;
  padding: 2px 6px;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  color: #409eff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.chart-container {
  width: 100%;
  height: 350px;
  margin-top: 20px;
}

.rate-display {
  display: flex;
  align-items: center;
}

.rate-display .el-progress {
  margin-right: 10px;
  width: 100px;
}

.difficulty-stars {
  font-size: 14px;
  letter-spacing: 2px;
}

/* 数学公式样式 */
.math-content {
  word-break: break-word;
}

:deep(.MathJax) {
  display: inline-block;
  margin: 2px 0;
}

:deep(.MathJax_Display) {
  text-align: left !important;
  margin: 8px 0 !important;
}

@media (max-width: 768px) {
  .chart-container {
    height: 250px;
  }
  
  .stat-card {
    margin-bottom: 15px;
  }
}

/* AI分析样式 */
.ai-analysis-section {
  margin-top: 40px;
  margin-bottom: 20px;
}

.ai-button-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.ai-description {
  margin-top: 15px;
}

.ai-analysis-dialog .el-dialog__body {
  padding: 20px;
  max-height: 65vh;
  overflow-y: auto;
}

.ai-analysis-content {
  min-height: 200px;
  padding: 10px;
}

.ai-result {
  font-family: "Microsoft YaHei", sans-serif;
  line-height: 1.8;
  color: #303133;
}

.ai-content-modules {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-title-module {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.ai-result p {
  margin-bottom: 15px;
}

.ai-title {
  margin: 10px 0 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ebeef5;
  font-weight: bold;
  color: #303133;
}

.ai-title-1 {
  font-size: 22px;
  color: #409eff;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.ai-title-2 {
  font-size: 20px;
  color: #67c23a;
  padding-left: 10px;
  border-left: 4px solid #67c23a;
}

.ai-title-3 {
  font-size: 18px;
  color: #e6a23c;
  padding-left: 8px;
  border-left: 3px solid #e6a23c;
}

.ai-error {
  padding: 20px;
}

.ai-empty {
  text-align: center;
  padding: 30px;
  color: #909399;
  font-size: 14px;
}

.ai-loading-tip {
  text-align: center;
  padding: 30px;
  color: #909399;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.ai-title-key-module {
  font-size: 22px;
  color: #409eff;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 12px 15px;
  background-color: rgba(64, 158, 255, 0.15);
  border-radius: 6px;
  border-left: 6px solid #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.ai-list-item {
  display: flex;
  margin: 10px 0;
  padding: 5px 0;
}

.ai-list-number {
  flex: 0 0 25px;
  font-weight: bold;
  color: #409eff;
}

.ai-list-content {
  flex: 1;
}

.ai-bold-text {
  color: #409eff;
  font-weight: bold;
  padding: 0 2px;
}
</style> 